'use strict';

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import {
  Paper
} from '@material-ui/core'

import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

import MedicineBlock from './medicine'
import medicine from './medicine';

const styles = theme => ({
  root: {
    width: window.innerWidth - 100,
    margin: 10,
    // backgroundColor: '#CCC',
    borderRadius: 0,
  }
});

class DiagnosisBlock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 0,
      _id: this.props._id
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps._id !== undefined) {
      this.setState({_id: nextProps._id})
    }
  }

  update() {
    this.medicineBlock.fetch(this.state._id)
  }
  
  render() {
    const { classes } = this.props
    const { value } = this.state
    return (
      <Paper className={classes.root}>
        <Tabs value={value} onChange={(e, v) => this.setState({ value: v })}>
          <Tab label="西药处方" />
          <Tab label="检查(治疗)单" />
          <Tab label="中药处方" />
        </Tabs>
        {value === 0 && <MedicineBlock _id={this.state._id} Ref={(r) =>  this.props.medicineRef(r)} />}
      </Paper>
    )
  }
}

DiagnosisBlock.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(DiagnosisBlock);